<template>
    <div>
        <div id="recordActivity" v-if="recordActivityShow">
            <div class="title">活动预约</div>
            <div class="choice">
                <div class="type">类型：
                    <el-select v-model="typeValue" placeholder="请选择">
                        <el-option size="20px" value="全部">全部</el-option>
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="date">收藏时间：
                    <el-date-picker v-model="dateValue" format="yyyy-MM-dd" type="datetimerange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" :picker-options="pickerOption"  @change="changeDate" ></el-date-picker>
                </div>
                <div class="search">
                    <el-input size="mini" placeholder="请输入内容" v-model="searchInput"></el-input>
                    <div><i class="el-icon-search"></i></div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="content">
                <div class="list" v-for="(item, index) in listData.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="index" @click="goDetailsOrder">
                    <img src="../../image/beijingtu.png" alt="">
                    <div class="left">
                        <div class="subject">{{item.name.title}}</div>
                        <div class="intro">{{item.name.intro}}</div>
                    </div>
                    <div class="center">
                        <div>活动地点</div>
                        <div>{{item.address}}</div>
                    </div>
                    <div class="right">
                        <div>活动时间</div>
                        <div>{{item.date}}</div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="paging">
                <div class="page" @click="homePage">首页</div>
                <!-- @pagination="getListData" -->
                <el-pagination background v-show="pageSize > 0"
                    :total="listData.length"
                    layout="prev, pager, next"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size="pageSize"
                    @current-change="clickChange">
                </el-pagination>
                <div class="page" @click="trailingPage">尾页</div>
            </div>
        </div>
        <div id="detailsOrder" v-if="detailsOrderShow">
            <div class="title">预约详情</div>
            <!-- 列表 -->
            <div class="content">
                <div class="top">
                    <div>订单号：{{orderNumber}}</div>
                    <div style="text-align: right;">订单时间：{{orderTime}}</div>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div>活动内容：{{activityContent}}</div>
                        <div>活动地址：{{activityAddress}}</div>
                        <div>活动时间：{{activityTime}}</div>
                        <div>预定人姓名：{{personName}}</div>
                        <div>手机号：{{cellPhone}}</div>
                        <div>身份证号：{{idNumber}}</div>
                    </div>
                    <div class="right">
                        <div class="code">
                            <div class="twCode"><img src="../../image/erweima.png" alt=""></div>
                            <div class="verify">验证码：{{verifyCode}}</div>
                        </div>
                        <div class="unsubscribe" @click="goUnsubscribe"><div>退订</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            recordActivityShow: true, // 活动预约显示隐藏
            // 类型
            typeOptions: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            typeValue: "全部",// 类型的选择
            dateValue: new Date(),// 日期的选择
            // start: new Date(),
            // over: new Date(),
            pickerOption: {//今天之后的日期禁用
                disabledDate(time) {
                    //如果没有后面的-8.64e6就是不可以选择今天的
                    return time.getTime() > Date.now() - 8.64e6;
                },
            },
            searchInput: "",// 搜索框输入的内容
            listData: [{
                id: "1",
                date: '2021-3-5-10:20:35',
                name: {
                    title: "中国共产党成立100周年",
                    intro: "华夏同庆中国共产党成立100周年，由驰柯 文化传播有限公司特约赞助。",
                },
                address: '审核通过'
            },{
                id: "2",
                date: '2021-3-5-10:20:35',
                name: '观看直播三十分钟',
                address: '审核通过'
            },{
                id: "2",
                date: '2021-3-5-10:20:35',
                name: '观看直播三十分钟',
                address: '审核通过'
            },{
                id: "2",
                date: '2021-3-5-10:20:35',
                name: '观看直播三十分钟',
                address: '审核通过'
            }, {
                id: "3",
                date: '2021-3-5-10:20:35',
                name: '收藏一条资源',
                address: '审核通过'
            }, {
                id: "4",
                date: '2021-3-5-10:20:35',
                name: '取消活动预定',
                address: '审核通过'
            }, {
                id: "5",
                date: '2021-3-5-10:20:35',
                name: '完善资料',
                address: '审核通过'
            }], // 列表内容
            pageNum: 1, //显示第几页
            pageSize: 5, //一页的数据数量
            // 预约详情
            detailsOrderShow: false, // 预约详情显示隐藏
            orderNumber: "74849757649557", // 订单号
            orderTime: "2021-3-10-09:30:35", // 订单时间
            activityContent: "中国共产党成立100周年", // 活动内容
            activityAddress: "顺义文化馆2楼", // 活动地址
            activityTime: "2021-3-10-10:30-12:00", // 活动时间
            personName: "张三", // 预定人姓名
            cellPhone: "1396478595", // 手机号
            idNumber: "110203196703082341", // 身份证号
            verifyCode: "4637847477", // 验证码
        };
	},
    mounted(){
        this.dateFormat() // 转换时间格式
    },
	methods: {
        // 默认转换时间格式
        dateFormat() {
            var date = new Date()
            // console.log(date)
            var year = date.getFullYear()  //年
            var month = date.getMonth() + 1
            month = month < 10 ? ('0' + month) : month  //月
            var days = date.getDate()
            days = days < 10 ? ('0' + days) : days  //日
            // this.start = year + '年' + month + '月' + days + '日' + ' ' + '00时00分00秒'
            // console.log(this.start)
            var hours = date.getHours()
            hours = hours < 10 ? ('0' + hours) : hours  //时
            var minutes = date.getMinutes()
            minutes = minutes < 10 ? ('0' + minutes) : minutes  //分
            var seconds = date.getSeconds()
            seconds = seconds < 10 ? ('0' + seconds) : seconds  //秒
            // this.over = year + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds
            // console.log(this.over)
        },
        // 点击选择开始与结束时间
        changeDate(data) {
            console.log(data)
            // this.start = data[0]
            // // this.over = data[1]
            // // console.log(this.start,this.over)
            // let overTime = data[1];
            // overTime = overTime.replace(/-/g, '/')
            // let overDataTime  = new Date(overTime)
            // let year = overDataTime.getFullYear() + '-'
            // let month = (overDataTime.getMonth() + 1 < 10 ? '0' + (overDataTime.getMonth()+1) : overDataTime.getMonth() + 1) + '-'
            // let days = (overDataTime.getDate() < 10 ? '0' + overDataTime.getDate() : overDataTime.getDate())
            // let overAfter = year + month + days + ' ' + '23:59:59'
            // this.over = overAfter// new Date(overAfter)
            // // console.log(this.dateValue,this.start,this.over)
        },
        // 首页
        homePage() {
            this.clickChange(1)
        },
        // 当前页
        clickChange(val) {
            this.pageNum = val;
            console.log(this.pageNum)
            // this.getListData();
        },
        // 尾页
        trailingPage(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
        // 预约详情
        goDetailsOrder() {
            this.recordActivityShow = false
            this.detailsOrderShow = true
        },
        // 退订
        goUnsubscribe() {
            this.detailsOrderShow = false
            this.recordActivityShow = true
        },
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #recordActivity{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        .choice{
            width: 96%;
            font-size: 16px;
            padding: 2% 2% 1% 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            // 类型
            .type{
                // width: 40%;
                margin-right: -5%;
                /deep/.el-select{
                    width: 60%;
                }
                /* selecte 框的高度设置，默认是 4px*/
                /deep/.el-input__inner{
                    height: 30px;
                }
                /* 下面设置右侧按钮居中 */
                /deep/.el-input__suffix {
                    top: 5px;
                }
                /deep/.el-input__icon {
                    line-height: inherit;
                }
                /deep/.el-input__suffix-inner {
                    display: inline-block;
                }
            }
            // 收藏时间
            .date{
                margin-right: -16%;
                /deep/.el-input__inner{
                    width: 50%;
                    height: 30px;
                }
                /deep/.el-range__icon{
                    height: 30px;
                    // color: white;
                }
                /deep/.el-range-separator{
                    height: 30px;
                }
            }
            // 搜索框
            .search{
                display: flex;
                .el-input{
                    flex: 4;
                }
                div{
                    height: 95%;
                    flex: 1;
                    background: #DDDDDD;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        // 列表
        .content{
            width: 100%;
            height: 400px;
            overflow: auto;
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
                .left{
                    .subject{
                        color: #F19417;
                    }
                }
            }
            .list{
                width: 98%;
                height: 90px;
                padding: 2% 1%;
                display: flex;
                border-bottom: 1px solid #ddd;
                img{
                    width: 100px;
                    height: 90px;
                }
                .left{
                    flex: 3;
                    margin-left: 3%;
                    .subject{
                        width: 70%;
                        font-size: 18px;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .intro{
                        width: 70%;
                        margin-top: 4%;
                    }
                }
                .center{
                    flex: 1;
                    color: #333333;
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                    margin: 0% 3%;
                    padding-top: 3%;
                    div{
                        line-height: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .right{
                    flex: 1;
                    color: #333333;
                    padding-top: 3%;
                    div{
                        line-height: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
    }
    // 预约详情
    #detailsOrder{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            color: rgb(122, 116, 116);
            .top{
                width: 94%;
                padding: 2% 3%;
                display: flex;
                align-items: center;
                font-size: 14px;
                border-bottom: 1px solid #ddd;
                div{
                    flex: 1;
                }
            }
            .bottom{
                width: 94%;
                padding: 3% 3% 2% 3%;
                display: flex;
                font-size: 14px;
                .left{
                    flex: 1;
                    margin-left: 3%;
                    div{
                        margin-bottom: 3%;
                    }
                }
                .right{
                    flex: 1;
                    display: flex;
                    border-left: 1px solid #ddd;
                    .code{
                        flex: 2;
                        text-align: center;
                        .twCode{
                            margin: 5% 0% 5% 0%;
                            img{
                                width: 130px;
                            }
                        }
                    }
                    .unsubscribe{
                        flex: 1;
                        position: relative;
                        div{
                            width: 50%;
                            text-align: center;
                            padding: 3% 0%;
                            color: #F19417;
                            border: 1px solid #F19417;
                            border-radius: 8px;
                            position: absolute;
                            right: 0%;
                            bottom: 0%;
                        }
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #recordActivity{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        .choice{
            width: 96%;
            font-size: 16px;
            padding: 2% 2% 1% 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            // 类型
            .type{
                // width: 40%;
                margin-right: -5%;
                /deep/.el-select{
                    width: 60%;
                }
                /* selecte 框的高度设置，默认是 4px*/
                /deep/.el-input__inner{
                    height: 30px;
                }
                /* 下面设置右侧按钮居中 */
                /deep/.el-input__suffix {
                    top: 5px;
                }
                /deep/.el-input__icon {
                    line-height: inherit;
                }
                /deep/.el-input__suffix-inner {
                    display: inline-block;
                }
            }
            // 收藏时间
            .date{
                margin-right: -16%;
                /deep/.el-input__inner{
                    width: 50%;
                    height: 30px;
                }
                /deep/.el-range__icon{
                    height: 30px;
                    // color: white;
                }
                /deep/.el-range-separator{
                    height: 30px;
                }
            }
            // 搜索框
            .search{
                display: flex;
                .el-input{
                    flex: 4;
                }
                div{
                    height: 95%;
                    flex: 1;
                    background: #DDDDDD;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        // 列表
        .content{
            width: 100%;
            height: 400px;
            overflow: auto;
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
                .left{
                    .subject{
                        color: #F19417;
                    }
                }
            }
            .list{
                width: 98%;
                height: 80px;
                padding: 2% 1%;
                display: flex;
                border-bottom: 1px solid #ddd;
                img{
                    width: 90px;
                    height: 80px;
                }
                .left{
                    flex: 3;
                    margin-left: 3%;
                    .subject{
                        width: 70%;
                        font-size: 16px;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .intro{
                        width: 70%;
                        margin-top: 3%;
                    }
                }
                .center{
                    flex: 1;
                    color: #333333;
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                    margin: 0% 3%;
                    padding-top: 3%;
                    div{
                        line-height: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .right{
                    flex: 1;
                    color: #333333;
                    padding-top: 2%;
                    div{
                        line-height: 20px;
                        display: flex;
                        // justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
    }
    // 预约详情
    #detailsOrder{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            color: rgb(122, 116, 116);
            .top{
                width: 94%;
                padding: 2%;
                display: flex;
                align-items: center;
                font-size: 12px;
                border-bottom: 1px solid #ddd;
                div{
                    flex: 1;
                }
            }
            .bottom{
                width: 94%;
                padding: 3% 3% 2% 3%;
                display: flex;
                font-size: 12px;
                .left{
                    flex: 1;
                    margin-left: 3%;
                    div{
                        margin-bottom: 3%;
                    }
                }
                .right{
                    flex: 1;
                    display: flex;
                    border-left: 1px solid #ddd;
                    .code{
                        flex: 2;
                        text-align: center;
                        .twCode{
                            margin: 4% 0%;
                            img{
                                width: 110px;
                            }
                        }
                    }
                    .unsubscribe{
                        flex: 1;
                        position: relative;
                        div{
                            width: 50%;
                            text-align: center;
                            padding: 3% 0%;
                            color: #F19417;
                            border: 1px solid #F19417;
                            border-radius: 8px;
                            position: absolute;
                            right: 0%;
                            bottom: 0%;
                        }
                    }
                }
            }
        }
    }
}
</style>